<template>
	<view>
		<!-- 时间 -->
		<view class="cflex-r u-p-10 u-m-b-25"
			style="justify-content: space-around;align-items: center;background-color: #FFFFFF;">
			<view @click="tabClick(Tindex)" v-for="(item,Tindex) in tabList" :key="Tindex" class="cflex-c"
				style="justify-content: center; align-items: center;">
				<view class="cflex-c" style="justify-content: center;align-items: center;"
					:style="{color:item.isSelect?'#FFBB01':'#707070',fontWeight:item.isSelect?'bold':'normal'}">
					<view>{{item.text}}</view>
					<view class="u-m-t-10">{{item.time}}</view>
				</view>
				<view :style="{opacity:item.isSelect?1:0}" class="u-m-t-10"
					style="width: 60rpx;height: 8rpx; background-color: #4578F7;border-radius: 20rpx;"></view>
			</view>
		</view>
		<!-- 服务时间 -->
		<view v-show="checked" class="cflex-r container"
			style="justify-content: space-around;align-items: center;margin: 0 20rpx 0 20rpx;">
			<!-- 时间 -->
			<view class="cflex-c u-m-b-20 u-font-12" style="justify-content: center;
						 align-items: center;border-radius: 20rpx;width: 150rpx; padding-bottom: 15rpx;padding-top: 15rpx;
					position: relative;color: #fff;" v-for="(item,timeIndex) in timeList" :key="timeIndex"
				:style="{backgroundColor:item.selected?'#4578F7':'#DCDCDC'}" @click="changeSelcet(item)">
				<text style="font-size: 28rpx;" :style="{color:item.selected?'#fff':'#333'}">{{item.startime}}</text>
				<text style="font-size: 28rpx;">至</text>
				<text style="margin-top: 10rpx;font-size: 28rpx;"
					:style="{color:item.selected?'#fff':'#333'}">{{item.endtime}}</text>
				<!-- 	<u-switch @change=''  active-color='#4578F7'
					size='32' v-if='item.selected' v-model="item.change"></u-switch> -->
				<view class="" v-if="item.selected" style="position: absolute;right: 2%;top: 2%;">
					<view class="icon_xuan" v-if="!item.change"></view>
					<u-icon v-else name="checkmark-circle-fill" color="#ff7631" size="40"></u-icon>
				</view>
			</view>
		</view>

		<view class="" style="position: fixed;bottom: 2%;width: 690rpx;left: 30rpx;">
			<u-button type="default" shape="circle" @click="sunmbit" :custom-style="buyBtn">确认时间</u-button>
		</view>
	</view>
</template>

<script>
	import store from "@/store/index.js"
	export default {
		data() {
			return {
				buyBtn: {
					backgroundColor: "#FF5400",
					fontSize: "17px",
					color: "white",
				},
				timeList: [],
				tabList: [],
				data: [],
				current: 0,
				checked: true,
				option: "",
				itemMood: [],
				mood: [],
				riqi: '',
				zon: [],
				currentdate:''
			}
		},
		onLoad(option) {
			this.option = JSON.parse(option.option);
			// // ////console.log(this.option);
			this.getDay();
			this.tabList.forEach((item, i) => {
				this.itemMood.push({
					day: item.day,
					show: false,
					timeList: []
				})
			})
			this.itemMood.forEach(item => {
				for (let i = 0; i < 25; i++) {
					item.timeList.push({
						id: i * 1 + 1 * 1,
						startTime: '',
						endTime: '',
						change: ''
					})
				}
			})


			this.riqi = this.tabList[this.current].day
			if (store.state.itemMood) {
				let mood = store.state.mood
				this.itemMood = store.state.itemMood
				console.log(mood, 444444)

				let list = []
				mood.forEach((item, i) => {
					this.itemMood.forEach((meth, k) => {
						if (item.day == meth.day) {
							// list.push(item)
							this.itemMood[k] = mood[i]

						}
					})
				})
				this.itemMood = JSON.parse(JSON.stringify(this.itemMood))
				console.log(list, 22222)
				console.log(this.itemMood, 33333)
			}
			this.showTime();
		},

		methods: {
			sunmbit() {
				let mood = []
				this.itemMood.forEach((item, i) => {
					if (item.show) {
						mood.push(item)
					}
				})
				this.$store.commit("setmood", mood);
				this.$store.commit("setitemMood", this.itemMood);
				uni.navigateBack()

			},
			changeSelcet(e) {
				console.log(e)
				if (e.selected) {
					e.change = !e.change
					this.itemMood.forEach((item, i) => {
						if (this.riqi == item.day) {
							item.show = true
							item.timeList.forEach(meth => {
								if (meth.id == e.id) {
									meth.startTime = e.startime
									meth.endTime = e.endtime
									meth.change = e.change
								}
							})

						}
					})

				}

			},
			// item点击
			itemClick(i) {
				// if(this.timeList[i].selected){
				// 	uni.$emit("chooseTime",{starTime:this.timeList[i].returnTime,startDate:this.timeList[i].returnDate})
				// 	uni.navigateBack({
				// 		delta:1
				// 	})			
				// }else{
				// 	uni.showToast({title:"此时段不可选择",icon:"error"})
				// }
			},

			//获取一小时后的日期  时间
			accessTimeInAnHour() {
				var date = new Date();
				var date1 = new Date().getTime(); // 获取当前时间戳
				// 当前时间戳+3600s（一小时，其他时间通过计算时间戳进行相应加减），重新设置 Date 对象
				date.setTime(date1 + 3600000);
				return this.zeroPadd(date);
			},

			//日期时间补0
			zeroPadd(date) {
				var hours = date.getHours(); // 获取时
				var minutes = date.getMinutes(); // 获取分
				var seperator1 = "-"; // 自定义日期分隔符
				var year = date.getFullYear(); // 获取年
				var month = date.getMonth() + 1; // 获取月
				var strDate = date.getDate(); // 获取日

				if (month >= 1 && month <= 9) {
					month = "0" + month;
				}
				if (strDate >= 0 && strDate <= 9) {
					strDate = "0" + strDate;
				}
				if (hours >= 0 && hours <= 9) {
					hours = "0" + hours;
				}
				if (minutes >= 0 && minutes <= 9) {
					minutes = "0" + minutes;
				}

				var time = hours
				 this.currentdate = year + seperator1 + month + seperator1 + strDate; // 年月日
				var date = time
				return date;
			},


			showTime() {
				this.$request("timeXxConfig/time/list").then(res => {
					//console.log(res)
					this.timeList = res.rows
					this.timeList.forEach((item, i) => {
						item.selected = true
						item.change = false
					})
					this.itemMood.forEach((item, i) => {
						if (this.riqi == item.day) {
							this.timeList.forEach((meth, k) => {
								item.timeList.forEach(item2 => {
									if (item2.id == meth.id) {
										meth.change = item2.change
									}
								})
							})
						}
					})

					this.onRequest()
				});
			},
			onRequest() {
				const now = new Date();
				const hours = ('0' + now.getHours()).slice(-2);
				this.$request("timeXxConfig/rest/time/list", {
					wid: this.option.jishiId,
					day: this.riqi
				}).then(res => {
					if (res.rows.length > 0) {
						res.rows.forEach((item, i) => {
							this.timeList.forEach((items, k) => {
								if (item.tcid == items.id) {
									if (item.status === 0) {
										items.selected = false
									} else {
										items.selected = true
									}
								}
							})
						})
					}

					console.log(hours)
					let time = this.accessTimeInAnHour()
					let cont  
					this.timeList.forEach((item, i) => {
						if(this.currentdate==this.riqi){
							cont  =item.id
							if(cont==1){
								cont=24
							}
							if(time<cont){
								item.selected = true
							}else{
								item.selected = false
							}
						}
					})
					this.timeList = JSON.parse(JSON.stringify(this.timeList))
					console.log(this.timeList)
					// this.data=res;
					// this.data=[];
					// this.getSortList(res)
					////console.log("da",this.data)
					// this.dealDate()
					// // ////console.log(this.data)
				});
			},
			dealDate() {
				var list = []
				for (var i = 0; i < 24; i++) {
					var temp = {
						selected: false
					}
					this.data[this.current].forEach((item, index) => {
						if (i === item.hour && item.isUse) { //显示为可以预约的时间
							temp.selected = true;
							temp.returnTime = item.text;
							temp.returnDate = item.date + " " + item.hour + ":00:00";
							// // ////console.log(item.date+" "+item.hour+":00:00")
						}
					})
					if (i <= 9) {
						temp.text1 = "0" + i + ":00"
						temp.text2 = (i + 1) > 10 ? i + ":00" : "0" + (i + 1) + ":00"
						if (i == 9) {
							temp.text2 = "10:00"
						}
					} else {
						temp.text1 = i + ":00"
						temp.text2 = (i + 1) == 24 ? "00:00" : (i + 1) + ":00"
					}
					list.push(temp)
				}
				this.timeList = list;
			},
			getSortList(res) { //获得日期分类列表,按每天分开
				let nowDay = 0;
				let existList = [{
						index: 0,
						use: false
					}, {
						index: 1,
						use: false
					}, {
						index: 2,
						use: false
					},
					{
						index: 3,
						use: false
					}, {
						index: 4,
						use: false
					}, {
						index: 5,
						use: false
					}
				]
				//如果存在就把对应位置抹去
				let tempList = []; //临时列表，存的都是同一天的时间
				let dayIndex = -1; //在下发的日期列表中是否含有某个日期(某日不上班的情况)
				res.data.forEach((item, index) => { //循环获得的列表，按每天分装在不同列表中
					if (nowDay === item.date || nowDay === 0) { //第一次运行或者日期未变化就直接存起来
						tempList.push(item);
					} else { //变化了日期就把tempList给装到大的data里，并清空tempList
						dayIndex = this.tabList.findIndex((sItem) => { //当前日期是否休息
							return nowDay === sItem.day
						})
						existList[dayIndex].use = dayIndex !== -1 ? true : false;
						this.data.push(tempList);
						tempList = [];
						tempList.push(item);
					}
					nowDay = item.date; //当前tempList存储的日期
				})

				dayIndex = this.tabList.findIndex((sItem) => { //今天是否休息
					return nowDay === sItem.day
				})
				existList[dayIndex].use = dayIndex !== -1 ? true : false;
				this.data.push(tempList); //把最后一个tempList加进去
				existList.forEach((item) => { //判断是否最近几天是否休息，休息就把当天置为[]
					if (!item.use) {
						this.data.splice(item.index, 0, []);
					}
				})
				////console.log("ex",existList)
			},
			// 获取日期
			getDay() {
				var tabList = [];
				for (var i = 0; i < 6; i++) {
					//获取日期
					var today = new Date();
					var targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * i;
					today.setTime(targetday_milliseconds); //注意，这行是关键代码
					var tYear = today.getFullYear();
					var tMonth = today.getMonth();
					var tDate = today.getDate();
					tMonth = this.doHandleMonth(tMonth + 1);
					tDate = this.doHandleMonth(tDate);
					var tab = {}
					tab.isSelect = false
					if (i == 0) {
						tab.text = "今天"
						tab.isSelect = true
					} else if (i == 1) {
						tab.text = "明天"
					} else {
						var text = "周" + "日一二三四五六".charAt(today.getDay());
						tab.text = text;
					}
					tab.time = tMonth + "-" + tDate
					tab.day = tYear + "-" + tMonth + "-" + tDate
					tabList.push(tab);
				}
				this.tabList = tabList;
			},
			doHandleMonth(month) {
				var m = month;
				if (month.toString().length == 1) {
					m = "0" + month;
				}
				return m;
			},
			tabClick(Tindex) {
				this.tabList[this.current].isSelect = false;
				this.tabList[Tindex].isSelect = true;
				this.current = Tindex;
				this.riqi = this.tabList[this.current].day

				this.showTime()




				//console.log(this.timeList)

			},
		},
		computed: {

		},
	}
</script>

<style scoped>
	.container {
		border-radius: 20rpx;
		flex-wrap: wrap;
	}

	.icon_xuan {
		width: 35rpx;
		height: 35rpx;
		border: 1rpx solid #f8f8f8;
		border-radius: 50%;
	}
</style>